<template>
<div class="container mx-auto ">
  <Header></Header>
  <div>
    <el-link icon="el-icon-edit" v-if="ownBlog" >
        <router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}" ><span class="text-2xl ">编辑</span></router-link>
    </el-link>
    <h1 class="bg-gray-200 p-3 ">{{  blog.title  }}</h1>
    <div class="markdown-body" v-html="blog.content"></div>
  </div>
</div>
</template>

<script>
import axios from "axios";
import 'github-markdown-css'
import Header from "../components/Header";
export default {
  name: "BlogDetail",
  components: {Header},
  data(){
    return{
      blog: {
        id: "",
        title: "",
        content: ""
      },
      ownBlog: true
    }
  },
  created() {
    document.title = 'BlogDetail';
    const _this = this
    let id = this.$route.params.blogId
    axios.get("/blogs/"+ id).then(resp => {
      console.log(resp)
      const blog = resp.data.data
      _this.blog.id = blog.id
      _this.blog.title = blog.title

      let MardownIt = require("markdown-it")
      let md = new MardownIt()

      _this.blog.content = md.render(blog.content)
      _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)

      console.log("_this.$store.getters.getUser.id   " + _this.$store.getters.getUser.id)
      console.log("blog.userId   " + blog.userId)
    })
  }
}
</script>

<style scoped>

</style>
